import React, { useEffect } from 'react';
import styles from './style.less';
import { Button, DatePicker, Divider, Space } from 'antd';
import { useSetState } from 'ahooks';
import moment from 'moment';

import TRButton from '#/components/TRButton';
import { UploadOutlined, FileTextOutlined } from '#/utils/antdIcons';
import { useExport } from '@/hooks';
import ConfigModal from '../ConfigModal/index';

const { RangePicker } = DatePicker;
const dateFormat = 'YYYYMMDD';

export default function TabMenu({
  saveValue,
  selectStationId,
  buttonPermissions,
  dataSourceList,
  dataColumn,
  signPoint,
  maxinLoadingFun,
}) {
  const [state, setState] = useSetState({
    date: [moment(), moment()],
    open: true,
  });

  useEffect(() => {
    if (!state.open) {
      saveValue({ date: state.date });
    }
  }, [state.open]);

  const _onExportData = async () => {
    let { date } = state;
    let beginDate = date[0].format(dateFormat);
    let endDate = date[1].format(dateFormat);
    const [realData, beforeList, afterList] = dataSourceList;
    const points = `第${signPoint.split('-')[1]}点`;
    useExport({
      exportType: 'ultraShortTerm',
      jsonParam: JSON.stringify({
        dateRange: `${beginDate}-${endDate}`,
        stationId: selectStationId,
        point: points,
        data: {
          dateList: dataColumn,
          realList: realData,
          beforeList: beforeList,
          afterList: afterList,
        },
      }),
    });
  };

  const changeDate = async (val) => {
    maxinLoadingFun(true);
    setState({
      date: val,
    });
  };

  const onOpenChange = (opens) => {
    setState({
      open: opens,
    });
  };

  const hasHistory = () => {
    ConfigModal.show({ stationId: selectStationId });
  };

  const { date } = state;
  return (
    <div className={styles.tabContainer}>
      <div>
        <RangePicker
          onChange={changeDate}
          onOpenChange={onOpenChange}
          value={date}
          separator="-"
          format={'YYYYMMDD'}
        />
      </div>
      <div className={styles.btn}>
        <Space split={<Divider type="vertical" />}>
          <Button onClick={hasHistory} type="link">
            <FileTextOutlined /> 操作日志
          </Button>
          <Button icon={<UploadOutlined />} type="link" onClick={_onExportData}>
            导出
          </Button>

          {/* <TRButton
            menuCode="ChaoDuanQiYuCeTiaoZhengDaoChu"
            buttonPermissions={buttonPermissions}
            onClick={_onExportData}
          >
          
            导出
          </TRButton> */}
        </Space>
      </div>
    </div>
  );
}
